
// 使用  ui

import React, { useState,useEffect } from 'react';
import './index.scss'
import { log } from 'console';

function SelectDown(props:any) {
    let [value,setValue] = useState('')
    let [show, setShow] = useState(false)
    let [selectActiveOne, setActivesOne] = useState(0)
    let [selectActiveTwo, setActivesTwo] = useState(0)

    //基本的样式

    //功能 =》 1点击显示下拉选择框

    // 2分析结构 =》[{name:"内科",list:[{name:"肾内科"}]}]
    // let arrs = [
    //     { name: "内科", list: [{ name: "肾内科" }, { name: "血液内科" }] },
    //     { name: "外客", list: [{ name: "皮肤科" }, { name: "外科1" }] }
    // ]

    useEffect(()=>{
        console.log(props.lists,555598611199999);
        
        if(props.lists.length>0){
            console.log(props.lists,5555986111);
            settwoLists(props.lists[0].list)
        }
    },[props.lists])
 
   
    const getSelectContent = () => {
        setShow(true)
    }
    // 组件渲染的比后端给的数据快  props.lists[0].list
    // 先要获取到  后端给的数据
  

    let [twoLists, settwoLists] = useState([])  //第二层的默认值
      
   
    const getTwoDatas = (index: number) => {
        settwoLists(props.lists[index].list)
        setActivesOne(index)
    }


    const selectTwoI = (index:number,val:string) =>{
        //  修改数据 =》组件重新创建
        setActivesTwo(index)
        setValue(val)
        // setShow(!show)
        // console.log(!show);
        setTimeout(() => {
            setShow(!show)
        }, 8);
        
        

        //子组件  =》需要将这个数据  =》给父组件
        props.getSelectName(val)
    }


    // 添加高亮效果  =》用户点击下拉选择， 第一层数据的第一项  ，第二层的数据的第一项
    return (
        <div className='slectDownBox' onClick={() => getSelectContent()}>

            {/*显示选择的内容   icon*/}
            <div className='selectContent glb-flex3'>
                <input type="text" value={value} disabled placeholder='请选择科室' name="" id="" />
                <i className='iconfont '>x</i>
            </div>

            {/* 显示 下拉选择框 第一层数据 */}
            {show?(<div className='showSelect'>
                {/* 遍历 */}

                {
                    props.lists.map((item:any, index:any) => {
                        return (   //showSelectItemA showSelectItem
                            <div className={` ${selectActiveOne==index?'showSelectItemA':'showSelectItem'}  '' +'glb-flex1'`} key={index}>
                                <div onClick={() => getTwoDatas(index)}>{item.name}  <i> dd</i></div>

                                {/* 动态的数据 */}
                                <div className='showTwoSelect'>
                                    {/*  动态数据 */}
                                    {
                                        twoLists.map((itm:any, idx:any) => {
                                            return (   // showTwoSelect-itemA  showTwoSelect-item
                                                <div onClick={()=>selectTwoI(idx,itm.name)} className={idx==selectActiveTwo?'showTwoSelect-itemA':'showTwoSelect-item'} key={idx}> {itm.name}</div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        )
                    })
                }

            </div>) : ''}


        </div>
    );
}


// 自己封装的一下下拉选择框的 =》 他 的数据 父组件给数据


// 问题 =》 组件渲染的顺序 =》后端给的数据 快


export default SelectDown